import { Cell, Graph } from '@antv/x6'
import { DataType } from '../../../shapes/type'

Graph.registerEdge('WaterCurrentLine', {
  inherit: 'edge',
  attrs: {
    line: {
      stroke: '#1fc770',
      strokeWidth: 5,
      strokeDasharray: 56,
      targetMarker: { name: '' },
      sourceMarker: { name: '' },
      style: {
        animation: 'infinite linear',
        animationDuration: '8.9s',
        animationName: 'yk-draw--ant-line'
      }
    },
    wrap: {
      stroke: '#cceedc',
      strokeWidth: 10
    }
  },
  data: {
    dataConfig: {
      runModel: 'variableValue',
      deviceId: null,
      variableId: null,
      variableAddress: null,
      updateData (cell, data: any) {
        let animationName = ''
        if (Number(data.value) > 0) animationName = 'yk-draw--ant-line'
        cell.attr('line/style/animationName', animationName)
      }
    },
    getAttrModules: () => {
      return [
        {
          title: '水流线样式',
          group: 'Attrs',
          components: () => import('./components/LintStyle.vue'),
          solution: {}
        },
        {
          title: '绑定设备变量',
          group: 'Data',
          components: () => import('../../components/BindDeviceVariable.vue'),
          solution: {}
        },
        {
          title: '更多',
          group: 'Data',
          components: () => import('./components/More.vue'),
          solution: {}
        }
      ]
    }
  } as DataType
} as any)

Graph.registerNode('WaterCurrentLineBox', {
  inherit: 'image',
  data: {
    events: {
      added (graph: Graph, args: { cell: Cell; isEdit: boolean; isShow: boolean }) {
        const { x, y } = (args.cell as any).getPosition()
        const { width, height } = (args.cell as any).getSize()
        graph.addEdge({
          shape: 'WaterCurrentLine',
          source: [x, y + height],
          target: [x + width, y]
        })
        graph.removeCell(args.cell.id)
      }
    }
  } as DataType
} as any)
